<template>
	<u-popup :show="show" v-bind="$attrs" mode="bottom" :round="10" :closeable="true">
		<view class="box">
			<view style="width:90%;margin-bottom: 20rpx;" class="bg-color">
				<up-input style="height: 30rpx;" :placeholder="placeholder" v-model="searchVal" clearable
					@change="change"></up-input>
			</view>
			<view v-if="newList.length>0" style="height: 620rpx;overflow: auto;">
				<view class="list bg-color m-b-5" v-for="(item,index) in newList" :key="index"
					@click="handleClick(item)">
					<view class="flex s-center p-b-4" v-for="(inm,inx) in config" :key="inx">
						<view>{{inm.label}}：</view>
						<up-text color="#7F899F" :lines="1" :text="item[inm.props]"></up-text>
					</view>
				</view>
			</view>
			<view v-else style="height: 500rpx;" class="flex-center">
				<u-empty mode="list"></u-empty>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		placeholder: {
			type: String,
			default: "请输入"
		},
		config: {
			type: Array,
			default: () => []
		},
		show: {
			type: Boolean,
			default: false
		},
		searchName: {
			type: String,
			default: "equipmentCode"
		},
	})

	const newList = ref([]),
		searchVal = ref('')

	watch(
		() => props.data,
		(val) => {
			newList.value = val
		}, {
			immediate: true
		}
	);

	const emit = defineEmits(['getData'])

	function handleClick(item) {
		emit('getData', item)
	}

	function change(e) {
		newList.value = props.data.filter(i => i[props.searchName].includes(e))
	}
</script>

<style scoped lang="scss">
	.box {
		height: 700rpx;
		padding: 20rpx;
		background-color: #f3f4f6;
	}

	.list {
		padding: 20rpx;
		border-radius: 8rpx;
		color: #7F899F;
	}
</style>